<template>
	<div class="cms-template-container">
		<el-dialog title="新增细览" v-model="isShowDialog" width="60%">
			<el-form ref="editTemplateFormRef" :model="formData" :rules="formRules" size="small" label-width="80px">
				<el-row :gutter="35">
					<el-col :xs="8" :sm="12" :md="12" :lg="12" :xl="14" class="mb20">
						<el-form-item label="细览名称" prop="name">
							<el-input v-model="formData.name" placeholder="请输入细览名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="8" :sm="6" :md="6" :lg="6" :xl="5" class="mb20">
						<el-form-item label="平台类型" prop="catalog">
							<el-select v-model="formData.catalog" placeholder="请选择平台类型" clearable class="w100">
								<el-option label="PC端" value="1"></el-option>
								<el-option label="AP端" value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="8" :sm="6" :md="6" :lg="6" :xl="5" class="mb20">
						<el-form-item label="细览状态" prop="status">
							<el-select v-model="formData.status" placeholder="请选择细览状态" clearable class="w100">
								<el-option label="正常" value="0"></el-option>
								<el-option label="停用" value="1"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col class="mb20">
						<Codemirror ref="codemirrorRef" v-model:value="formData.template" :options="configs" border :height="500"/>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="small">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="small">保 存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, ref } from 'vue';
import { ElMessage } from 'element-plus';
import Codemirror from "codemirror-editor-vue3";
// 引入主题 可以从 codemirror/theme/ 下引入多个
import "codemirror/lib/codemirror.css";
import 'codemirror/theme/idea.css'
// 引入语言模式 可以从 codemirror/mode/ 下引入多个
import "codemirror/mode/css/css.js";
import 'codemirror/mode/htmlmixed/htmlmixed.js';
import "codemirror/mode/javascript/javascript.js";
import "codemirror/addon/edit/matchbrackets.js";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/anyword-hint.js";
import { editTemplate } from '/@/api/cms/channel/template/index';
export default {
	name: 'cms/template/edit',
	components: { Codemirror },
	setup(props, context) {
		const editTemplateFormRef = ref();
		const codemirrorRef = ref();
		const state = reactive({
			isShowDialog: false,
			templates: [],
			formData: {},
			formRules : {
				name : { required: true, message: '细览名称不能为空', trigger: 'blur' },
				catalog: { required: true, message: '细览类型不能为空', trigger: 'change' },
				status: { required: true, message: '细览状态不能为空', trigger: 'change' },
				template: { required: true, message: '细览模板不能为空', trigger: 'blur' },
			},
			configs: {
				model: 'text/html',
				// 主题
				theme: 'idea',
				// 显示函数
				line: true,
				lineNumbers: true,
				// 软换行
				lineWrapping: true,
				gutters:["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
				matchBrackets: true,
				extraKeys:{"Ctrl-Space":"autocomplete"},
				// tab宽度
				tabSize: 4,
			}
		});
		
		// 打开弹窗
		const openDialog = (row?: object) => {
			if(row){
				state.isShowDialog = true;
				state.formData = Object.assign({}, row);
			}
		};
		// 关闭弹窗
		const closeDialog = (row?: object) => {
			state.isShowDialog = false;
			for(var key in state.formData) {
				state.formData[key] = undefined;
			}
			editTemplateFormRef.value.resetFields();
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 新增
		const onSubmit = () => {
			editTemplateFormRef.value.validate(valid => {
				if(valid){
					let params = {
						id: state.formData.id,
						siteId: state.formData.siteId,
						channelId: state.formData.channelId,
						name: state.formData.name,
						catalog: state.formData.catalog,
						status: state.formData.status,
						template: state.formData.template,
					}
					editTemplate(params).then((res) => {
						if(res.code === 0){
							ElMessage.success('保存成功');
							context.emit('submit');
							closeDialog();
						}
					});
				}
			});
		};
		return {
			editTemplateFormRef,
			codemirrorRef,
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			...toRefs(state),
		};
	},
};
</script>